<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>我的银行卡</title>

    <!-- Bootstrap -->
    <link href="bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap-3.3.5-dist/css/my_card.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container main">
      <div class="row">
        <div class="col-md-12">
            <div class="card">
              <div class="card_img">
                <img src="images/gongshang.png">
              </div>
              <div class="card_info">
                  <h4>中国工商银行</h4>
                  <ul>
                    <li>****</li>
                    <li>****</li>
                    <li>****</li>
                    <li>1234</li>
                  </ul>
              </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="card">
              <div class="card_img">
                <img src="images/gongshang.png">
              </div>
              <div class="card_info">
                  <h4>中国工商银行</h4>
                  <ul>
                    <li>****</li>
                    <li>****</li>
                    <li>****</li>
                    <li>1234</li>
                  </ul>
              </div>
            </div>
        </div>
        <div class="col-md-12">
        <a href="add_card.html">
          <div class="add_card">
                <div class="add_card_info">
                  <img src="images/add_card.png">
                  添加银行卡
                </div>
          </div>
        </a>
        </div>
      </div>
    </div>      
    <!--背景灰色图层-->
    <div class="bgc"></div>
    <!--删除图层-->
    <div class="container del">
      <div class="row">
        <div class="col-md-12 delete">
        删除
        </div>
        <div class="col-md-12 delete_white">
        取消
        </div>
      </div>
    </div>
    <!--输入支付密码图层-->
    <div class="pay_password">
        <div class="container">
            <div class="row">
              <div class="col-md-12 pay_password_title">输入支付密码</div>
              <div class="col-md-12">
                  <from>
                    <div class="pay_password_input">
                      <span>交易密码</span>
                      <input class="password1" type="password" placeholder="请输入旧密码"  >
                    </div>
                    <div class="pay_password_buttun">
                      <button type="button"  class="cancle_button">取消</button>
                      <button type="submit"  class="sure_button">确定</button>
                    </div>
                  </from>
              </div>  
            </div>
        </div> 
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    $(function() { 
        $(".bgc").css("height",$(document).height());  
        // var password1 = $('.password1').val();            
    });
    /*背景图层居中*/
    $(".card").click(function(){
      $(".bgc").css("display","block"); 
      var top = ($(window).height() - $(".del").height());
      var scrollTop = $(window).scrollTop();  
      $(".del").css( { position : 'absolute', 'top' : top + scrollTop} );    
      $(".del").css("display","block");
    });
    /*删除按钮并显示密码输入框*/
    $(".delete").click(function(){
      $(".del").css("display","none");
      var top = ($(window).height() - $(".pay_password").height())/2;
      var scrollTop = $(window).scrollTop();  
      $(".pay_password").css( { position : 'absolute', 'top' : top + scrollTop} );    
      $(".pay_password").css("display","block");
    });
    /*取消按钮*/
    $(".delete_white").click(function(){
      $(".bgc").css("display","none");
      $(".del").css("display","none");
    });
    /*关闭支付框*/
    $(".cancle_button").click(function(){
        $(".bgc").css("display","none");
        $(".pay_password").css("display","none");
    });
    </script>
  </body>
</html>